<template>
  <transition name="mx-mask">
    <div :class="!text ? 'mx-loading-no-text mx-loading-wrapper' : 'mx-loading-wrapper'" v-show="appear">
      <div class="mx-mask_transparent"></div>
      <div class="mx-toast" :style="{position: position}">
        <i class="mx-loading mx-icon_toast"></i>
        <p class="mx-toast__content" v-if="text">{{ text }}<slot></slot>
        </p>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'mx-loading',
  model: {
    prop: 'appear',
    event: 'change'
  },
  props: ['appear', 'text', 'position'],
  watch: {
    appear (val) {
      this.$emit('update:appear', val)
    }
  }
}
</script>

<style lang="less">
.mx-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
/*背景*/
.mx-mask_transparent {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
/*********************中间toast的样式,可以通过复写来实现主题自定义，z-index记得设置*********************/
.mx-toast {
  position: fixed;
  z-index: 5001;
  width: 7.6em;
  min-height: 7.6em;
  top: 180px;
  left: 50%;
  margin-left: -3.8em;
  background: rgba(17, 17, 17, 0.7);
  text-align: center;
  border-radius: 5px;
  color: #ffffff;
  .mx-icon_toast {
    margin: 22px 0 0;
    display: block;
    &.mx-icon-success-no-circle {
      &:before {
        color: #ffffff;
        font-size: 55px;
      }
    }
    &.mx-loading {
      margin: 30px 0 0;
      width: 38px;
      height: 38px;
      vertical-align: baseline;
      display: inline-block;
      animation: mxLoading 1s steps(12, end) infinite;
      background: transparent
        url("")
        no-repeat;
      background-size: 100%;
      &.mx-loading_transparent {
        background-image: url("");
      }
    }
  }
  .mx-toast__content {
    margin: 5px 0 15px;
  }
}
.mx-loading-no-text .mx-toast {
  min-height: 98px;
}
@-webkit-keyframes mxLoading {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

@keyframes mxLoading {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}
/******************************************/
</style>
